<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>四象限任务管理</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="container">
      <!-- 导航栏 -->
      <nav class="navbar">
        <div class="navbar-content">
          <div class="navbar-left">
            <!-- <button class="icon-button back-button" aria-label="返回">
              <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
              </svg>
            </button> -->
            <h1 class="title">四象限任务管理</h1>
          </div>
          
          <div class="navbar-right">
            <button class="icon-button unassigned-button" id="unassigned-button" aria-label="未分配任务" title="未分配任务">
              <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
              </svg>
            </button>
            <button class="icon-button theme-button" id="theme-button" aria-label="更换主题" title="更换主题">
              <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path>
              </svg>
            </button>
            
            <button class="icon-button filter-button" aria-label="筛选">
              <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"></path>
              </svg>
            </button>
            
            <div class="dropdown">
              <button class="icon-button more-button" id="more-button" aria-label="更多操作">
                <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
                </svg>
              </button>
              
              <div class="dropdown-content" id="dropdown-menu">
                <a href="#" class="dropdown-item" id="mark-all-completed">全部标记为已完成</a>
                <a href="#" class="dropdown-item" id="import-tasks">导入任务</a>
                <a href="#" class="dropdown-item" id="export-tasks">导出任务</a>
                <a href="#" class="dropdown-item" id="settings">设置</a>
              </div>
            </div>
          </div>
        </div>
      </nav>
      
      <!-- 四象限主体 -->
      <main class="quadrants-container">
        <!-- 第一象限：重要且紧急 -->
        <div class="quadrant quadrant-1" id="quadrant-1">
          <div class="quadrant-header">
            <div class="quadrant-header-left">
              <h2 class="quadrant-title">重要且紧急</h2>
              <p class="quadrant-description">需要立即处理的任务</p>
            </div>
            <div class="quadrant-header-right">
              <span class="task-count" id="count-1">0 任务</span>
              <button class="icon-button add-task-button" data-quadrant="1" aria-label="添加任务">
                <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                </svg>
              </button>
            </div>
          </div>
          
          <div class="add-task-form" id="add-form-1">
            <h3 class="form-title">添加任务</h3>
            <div class="form-group">
              <label for="task-title-1">任务名称</label>
              <input type="text" id="task-title-1" class="task-input" placeholder="输入任务名称..." data-quadrant="1" required>
            </div>
            <div class="form-group">
              <label for="task-desc-1">任务描述</label>
              <textarea id="task-desc-1" class="task-textarea" placeholder="输入任务描述..." data-quadrant="1"></textarea>
            </div>
            <div class="form-row">
              <div class="form-group form-group-half">
                <label for="task-priority-1">优先级</label>
                <select id="task-priority-1" class="task-select" data-quadrant="1">
                  <option value="low">低</option>
                  <option value="medium" selected>中</option>
                  <option value="high">高</option>
                </select>
              </div>
              <div class="form-group form-group-half">
                <label for="task-deadline-1">截止日期</label>
                <input type="date" id="task-deadline-1" class="task-date" data-quadrant="1">
              </div>
            </div>
            <div class="form-buttons">
              <button class="cancel-button" data-quadrant="1">取消</button>
              <button class="add-button" data-quadrant="1">添加</button>
            </div>
          </div>
          
          <div class="tasks-container" id="tasks-1"></div>
        </div>
        
        <!-- 第二象限：重要不紧急 -->
        <div class="quadrant quadrant-2" id="quadrant-2">
          <div class="quadrant-header">
            <div class="quadrant-header-left">
              <h2 class="quadrant-title">重要不紧急</h2>
              <p class="quadrant-description">需要规划的任务</p>
            </div>
            <div class="quadrant-header-right">
              <span class="task-count" id="count-2">0 任务</span>
              <button class="icon-button add-task-button" data-quadrant="2" aria-label="添加任务">
                <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                </svg>
              </button>
            </div>
          </div>
          
          <div class="add-task-form" id="add-form-2">
            <h3 class="form-title">添加任务</h3>
            <div class="form-group">
              <label for="task-title-2">任务名称</label>
              <input type="text" id="task-title-2" class="task-input" placeholder="输入任务名称..." data-quadrant="2" required>
            </div>
            <div class="form-group">
              <label for="task-desc-2">任务描述</label>
              <textarea id="task-desc-2" class="task-textarea" placeholder="输入任务描述..." data-quadrant="2"></textarea>
            </div>
            <div class="form-row">
              <div class="form-group form-group-half">
                <label for="task-priority-2">优先级</label>
                <select id="task-priority-2" class="task-select" data-quadrant="2">
                  <option value="low">低</option>
                  <option value="medium" selected>中</option>
                  <option value="high">高</option>
                </select>
              </div>
              <div class="form-group form-group-half">
                <label for="task-deadline-2">截止日期</label>
                <input type="date" id="task-deadline-2" class="task-date" data-quadrant="2">
              </div>
            </div>
            <div class="form-buttons">
              <button class="cancel-button" data-quadrant="2">取消</button>
              <button class="add-button" data-quadrant="2">添加</button>
            </div>
          </div>
          
          <div class="tasks-container" id="tasks-2"></div>
        </div>
        
        <!-- 第三象限：紧急不重要 -->
        <div class="quadrant quadrant-3" id="quadrant-3">
          <div class="quadrant-header">
            <div class="quadrant-header-left">
              <h2 class="quadrant-title">紧急不重要</h2>
              <p class="quadrant-description">考虑委派的任务</p>
            </div>
            <div class="quadrant-header-right">
              <span class="task-count" id="count-3">0 任务</span>
              <button class="icon-button add-task-button" data-quadrant="3" aria-label="添加任务">
                <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                </svg>
              </button>
            </div>
          </div>
          
          <div class="add-task-form" id="add-form-3">
            <h3 class="form-title">添加任务</h3>
            <div class="form-group">
              <label for="task-title-3">任务名称</label>
              <input type="text" id="task-title-3" class="task-input" placeholder="输入任务名称..." data-quadrant="3" required>
            </div>
            <div class="form-group">
              <label for="task-desc-3">任务描述</label>
              <textarea id="task-desc-3" class="task-textarea" placeholder="输入任务描述..." data-quadrant="3"></textarea>
            </div>
            <div class="form-row">
              <div class="form-group form-group-half">
                <label for="task-priority-3">优先级</label>
                <select id="task-priority-3" class="task-select" data-quadrant="3">
                  <option value="low">低</option>
                  <option value="medium" selected>中</option>
                  <option value="high">高</option>
                </select>
              </div>
              <div class="form-group form-group-half">
                <label for="task-deadline-3">截止日期</label>
                <input type="date" id="task-deadline-3" class="task-date" data-quadrant="3">
              </div>
            </div>
            <div class="form-buttons">
              <button class="cancel-button" data-quadrant="3">取消</button>
              <button class="add-button" data-quadrant="3">添加</button>
            </div>
          </div>
          
          <div class="tasks-container" id="tasks-3"></div>
        </div>
        
        <!-- 第四象限：不重要不紧急 -->
        <div class="quadrant quadrant-4" id="quadrant-4">
          <div class="quadrant-header">
            <div class="quadrant-header-left">
              <h2 class="quadrant-title">不重要不紧急</h2>
              <p class="quadrant-description">考虑删减的任务</p>
            </div>
            <div class="quadrant-header-right">
              <span class="task-count" id="count-4">0 任务</span>
              <button class="icon-button add-task-button" data-quadrant="4" aria-label="添加任务">
                <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                </svg>
              </button>
            </div>
          </div>
          
          <div class="add-task-form" id="add-form-4">
            <h3 class="form-title">添加任务</h3>
            <div class="form-group">
              <label for="task-title-4">任务名称</label>
              <input type="text" id="task-title-4" class="task-input" placeholder="输入任务名称..." data-quadrant="4" required>
            </div>
            <div class="form-group">
              <label for="task-desc-4">任务描述</label>
              <textarea id="task-desc-4" class="task-textarea" placeholder="输入任务描述..." data-quadrant="4"></textarea>
            </div>
            <div class="form-row">
              <div class="form-group form-group-half">
                <label for="task-priority-4">优先级</label>
                <select id="task-priority-4" class="task-select" data-quadrant="4">
                  <option value="low">低</option>
                  <option value="medium" selected>中</option>
                  <option value="high">高</option>
                </select>
              </div>
              <div class="form-group form-group-half">
                <label for="task-deadline-4">截止日期</label>
                <input type="date" id="task-deadline-4" class="task-date" data-quadrant="4">
              </div>
            </div>
            <div class="form-buttons">
              <button class="cancel-button" data-quadrant="4">取消</button>
              <button class="add-button" data-quadrant="4">添加</button>
            </div>
          </div>
          
          <div class="tasks-container" id="tasks-4"></div>
        </div>
      </main>
    </div>
    
    <!-- 任务模板 (隐藏，用于JavaScript克隆) -->
    <template id="task-template">
      <div class="task" draggable="true">
        <div class="task-header">
          <div class="task-header-left">
            <input type="checkbox" class="task-checkbox">
            <div class="task-info">
              <p class="task-title"></p>
              <p class="task-deadline"></p>
            </div>
          </div>
          <div class="task-header-right">
            <span class="priority-badge"></span>
            <div class="task-actions">
              <button class="task-action edit-button" title="编辑任务">
                <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                </svg>
              </button>
              <button class="task-action delete-button" title="删除任务">
                <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                </svg>
              </button>
              <button class="task-action expand-button" title="展开详情">
                <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
        <div class="task-description"></div>
      </div>
    </template>
    
    <!-- 编辑任务模态框 -->
    <div class="modal" id="edit-task-modal">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title">编辑任务</h3>
          <button class="modal-close">&times;</button>
        </div>
        <div class="modal-body">
          <input type="hidden" id="edit-task-id">
          <div class="form-group">
            <label for="edit-task-title">任务名称</label>
            <input type="text" id="edit-task-title" class="task-input" placeholder="输入任务名称..." required>
          </div>
          <div class="form-group">
            <label for="edit-task-desc">任务描述</label>
            <textarea id="edit-task-desc" class="task-textarea" placeholder="输入任务描述..."></textarea>
          </div>
          <div class="form-row">
            <div class="form-group form-group-half">
              <label for="edit-task-priority">优先级</label>
              <select id="edit-task-priority" class="task-select">
                <option value="low">低</option>
                <option value="medium">中</option>
                <option value="high">高</option>
              </select>
            </div>
            <div class="form-group form-group-half">
              <label for="edit-task-deadline">截止日期</label>
              <input type="date" id="edit-task-deadline" class="task-date">
            </div>
          </div>
          <div class="form-group">
            <label for="edit-task-quadrant">象限</label>
            <select id="edit-task-quadrant" class="task-select">
              <option value="1">第一象限 - 重要且紧急</option>
              <option value="2">第二象限 - 重要不紧急</option>
              <option value="3">第三象限 - 紧急不重要</option>
              <option value="4">第四象限 - 不重要不紧急</option>
            </select>
          </div>
        </div>
        <div class="modal-footer">
          <button class="cancel-button" id="edit-cancel-button">取消</button>
          <button class="save-button" id="edit-save-button">保存</button>
        </div>
      </div>
    </div>

    <!-- 删除确认模态框 -->
    <div class="modal" id="delete-confirm-modal">
      <div class="modal-content modal-sm">
        <div class="modal-header">
          <h3 class="modal-title">确认删除</h3>
          <button class="modal-close">&times;</button>
        </div>
        <div class="modal-body">
          <p>确定要删除这个任务吗？此操作无法撤销。</p>
          <input type="hidden" id="delete-task-id">
        </div>
        <div class="modal-footer">
          <button class="cancel-button" id="delete-cancel-button">取消</button>
          <button class="delete-button" id="delete-confirm-button">删除</button>
        </div>
      </div>
    </div>

    <!-- 未分配任务模态框 -->
    <div class="modal" id="unassigned-tasks-modal">
      <div class="modal-content modal-lg">
        <div class="modal-header">
          <h3 class="modal-title">未分配任务</h3>
          <button class="modal-close">&times;</button>
        </div>
        <div class="modal-body">
          <div class="unassigned-actions">
            <button class="add-unassigned-button">
              <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
              </svg>
              添加未分配任务
            </button>
          </div>
          <div class="unassigned-tasks-list" id="unassigned-tasks-list">
            <!-- 未分配任务将在这里动态生成 -->
            <div class="empty-message">暂无未分配任务</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 添加未分配任务表单模态框 -->
    <div class="modal" id="add-unassigned-modal">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title">添加未分配任务</h3>
          <button class="modal-close">&times;</button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label for="unassigned-task-title">任务名称</label>
            <input type="text" id="unassigned-task-title" class="task-input" placeholder="输入任务名称..." required>
          </div>
          <div class="form-group">
            <label for="unassigned-task-desc">任务描述</label>
            <textarea id="unassigned-task-desc" class="task-textarea" placeholder="输入任务描述..."></textarea>
          </div>
          <div class="form-row">
            <div class="form-group form-group-half">
              <label for="unassigned-task-priority">优先级</label>
              <select id="unassigned-task-priority" class="task-select">
                <option value="low">低</option>
                <option value="medium" selected>中</option>
                <option value="high">高</option>
              </select>
            </div>
            <div class="form-group form-group-half">
              <label for="unassigned-task-deadline">截止日期</label>
              <input type="date" id="unassigned-task-deadline" class="task-date">
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="cancel-button" id="unassigned-cancel-button">取消</button>
          <button class="add-button" id="unassigned-add-button">添加</button>
        </div>
      </div>
    </div>

    <!-- 未分配任务项模板 (隐藏的) -->
    <template id="unassigned-task-template">
      <div class="unassigned-task">
        <div class="unassigned-task-header">
          <div class="unassigned-task-info">
            <h4 class="unassigned-task-title"></h4>
            <p class="unassigned-task-deadline"></p>
            <p class="unassigned-task-description"></p>
          </div>
          <div class="unassigned-task-actions">
            <button class="assign-button" title="分配到象限">
              <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"></path>
              </svg>
              分配
            </button>
            <button class="task-action edit-button" title="编辑任务">
              <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
              </svg>
            </button>
            <button class="task-action delete-button" title="删除任务">
              <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </template>

    <!-- 分配任务模态框 -->
    <div class="modal" id="assign-task-modal">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title">分配任务到象限</h3>
          <button class="modal-close">&times;</button>
        </div>
        <div class="modal-body">
          <input type="hidden" id="assign-task-id">
          <div class="form-group">
            <label for="assign-task-quadrant">选择象限</label>
            <select id="assign-task-quadrant" class="task-select">
              <option value="1">第一象限 - 重要且紧急</option>
              <option value="2">第二象限 - 重要不紧急</option>
              <option value="3">第三象限 - 紧急不重要</option>
              <option value="4">第四象限 - 不重要不紧急</option>
            </select>
          </div>
        </div>
        <div class="modal-footer">
          <button class="cancel-button" id="assign-cancel-button">取消</button>
          <button class="save-button" id="assign-save-button">分配</button>
        </div>
      </div>
    </div>

    <!-- 筛选模态框 -->
    <div class="modal" id="filter-modal">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title">筛选任务</h3>
          <button class="modal-close">&times;</button>
        </div>
        <div class="modal-body">
          <div class="filter-section">
            <h4 class="filter-section-title">按状态筛选</h4>
            <div class="filter-options">
              <label class="filter-option">
                <input type="checkbox" name="status" value="completed"> 已完成
              </label>
              <label class="filter-option">
                <input type="checkbox" name="status" value="uncompleted"> 未完成
              </label>
            </div>
          </div>
          
          <div class="filter-section">
            <h4 class="filter-section-title">按优先级筛选</h4>
            <div class="filter-options">
              <label class="filter-option">
                <input type="checkbox" name="priority" value="high"> 高优先级
              </label>
              <label class="filter-option">
                <input type="checkbox" name="priority" value="medium"> 中优先级
              </label>
              <label class="filter-option">
                <input type="checkbox" name="priority" value="low"> 低优先级
              </label>
            </div>
          </div>
          
          <div class="filter-section">
            <h4 class="filter-section-title">按截止日期筛选</h4>
            <div class="filter-options">
              <label class="filter-option">
                <input type="checkbox" name="deadline" value="today"> 今天
              </label>
              <label class="filter-option">
                <input type="checkbox" name="deadline" value="tomorrow"> 明天
              </label>
              <label class="filter-option">
                <input type="checkbox" name="deadline" value="thisWeek"> 本周
              </label>
              <label class="filter-option">
                <input type="checkbox" name="deadline" value="nextWeek"> 下周
              </label>
              <label class="filter-option">
                <input type="checkbox" name="deadline" value="noDeadline"> 无截止日期
              </label>
            </div>
          </div>
          
          <div class="filter-section">
            <h4 class="filter-section-title">自定义日期范围</h4>
            <div class="form-row">
              <div class="form-group form-group-half">
                <label for="filter-date-from">从</label>
                <input type="date" id="filter-date-from" class="task-date">
              </div>
              <div class="form-group form-group-half">
                <label for="filter-date-to">到</label>
                <input type="date" id="filter-date-to" class="task-date">
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="filter-reset-button">重置筛选</button>
          <button class="filter-apply-button">应用筛选</button>
        </div>
      </div>
    </div>

    <!-- 导入文件输入 (隐藏) -->
    <input type="file" id="import-file-input" accept=".json" style="display: none;">

    <!-- 主题选择模态框 -->
    <div class="modal" id="theme-modal">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title">选择主题</h3>
          <button class="modal-close">&times;</button>
        </div>
        <div class="modal-body">
          <div class="theme-options">
            <div class="theme-option" data-theme="default">
              <div class="theme-preview">
                <div class="theme-color theme-color-1"></div>
                <div class="theme-color theme-color-2"></div>
                <div class="theme-color theme-color-3"></div>
                <div class="theme-color theme-color-4"></div>
              </div>
              <div class="theme-name">默认主题</div>
            </div>
            
            <div class="theme-option" data-theme="blue">
              <div class="theme-preview">
                <div class="theme-color blue-color-1"></div>
                <div class="theme-color blue-color-2"></div>
                <div class="theme-color blue-color-3"></div>
                <div class="theme-color blue-color-4"></div>
              </div>
              <div class="theme-name">蓝色主题</div>
            </div>
            
            <div class="theme-option" data-theme="green">
              <div class="theme-preview">
                <div class="theme-color green-color-1"></div>
                <div class="theme-color green-color-2"></div>
                <div class="theme-color green-color-3"></div>
                <div class="theme-color green-color-4"></div>
              </div>
              <div class="theme-name">绿色主题</div>
            </div>
            
            <div class="theme-option" data-theme="purple">
              <div class="theme-preview">
                <div class="theme-color purple-color-1"></div>
                <div class="theme-color purple-color-2"></div>
                <div class="theme-color purple-color-3"></div>
                <div class="theme-color purple-color-4"></div>
              </div>
              <div class="theme-name">紫色主题</div>
            </div>
            
            <div class="theme-option" data-theme="dark">
              <div class="theme-preview">
                <div class="theme-color dark-color-1"></div>
                <div class="theme-color dark-color-2"></div>
                <div class="theme-color dark-color-3"></div>
                <div class="theme-color dark-color-4"></div>
              </div>
              <div class="theme-name">暗黑主题</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html> 